<template>
  <div class="row">

    <div>{{list1}}</div>

    <div class="col-4">
      <h3>First draggable with header</h3>

      <!--<draggable class="" tag="ul" :list="list1" :group="{ name: 'g1' }">
        <div
          v-for="(element,index) in list1"
          :key="element.id">
          <div style="text-indent: 1em;font-weight: bold">我是第{{index}}列数据: {{element.name}}</div>
          <draggable
            @end="(e) => onEnd(e,index)"
            data-source="juju"
            :list="element.list"
            class="list-group"
            draggable=".item"
            :group="{ name: 'g1' }"
            v-bind="dragOptions">

            <div class="list-group-item item"
                 @mousedown="onClick(index,i,element,n)"
                 v-for="(n,i) in element.list"
                 :key="n.id">
              {{ n.name }}
            </div>
          </draggable>
        </div>
      </draggable>-->
      <div
        v-for="(element,index) in list1"
        :key="element.id">
        <div style="text-indent: 1em;font-weight: bold">我是第{{index}}列数据: {{element.name}}</div>
        <draggable
          @end="(e) => onEnd(e,index)"
          data-source="juju"
          :list="element.list"
          class="list-group"
          draggable=".item"
          :group="{ name: 'g1' }"
          v-bind="dragOptions">

          <div class="list-group-item item"
               @mousedown="onClick(index,i,element,n)"
               v-for="(n,i) in element.list"
               :key="n.id">
            {{ n.name }}
          </div>
        </draggable>
      </div>


    </div>

    <div style="margin-top: 40px">
      <h3>First draggable with header</h3>
      <draggable class="" tag="ul" :list="list2" :group="{ name: 'g1' }">
        <div
          v-for="(element,index) in list2"
          @touchmove="onClick(0)"
          :key="element.id">
          <div style="text-indent: 1em;font-weight: bold">我是第{{index}}列数据: {{element.name}}</div>
          <draggable
            @mousedown.native="onClick(index)"
            @mouseup.native="onClick(index)"
            @end="(e) => onEnd(e,index)"
            data-source="juju"
            :list="element.list"
            class="list-group"
            draggable=".item"
            :group="{ name: 'g1' }"
            v-bind="dragOptions">

            <div class="list-group-item item" v-for="n in element.list" :key="n.id" style="color: rebeccapurple">
              {{ n.name }}
            </div>
          </draggable>
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'

  export default {
    name: 'transition-example-2',
    display: 'Transitions',
    order: 7,
    components: {
      draggable
    },
    data () {
      return {
        list1: [
          { name: 'John 1', id: 0, list: [{ name: '我的', id: 10 }, { name: '范德萨看', id: 11 }] },
          { name: 'Joao 2', id: 1, list: [{ name: '发送到', id: 12 }, { name: '地方', id: 13 }] },
          { name: 'Jean 3', id: 2, list: [{ name: '嗯嗯', id: 14 }, { name: '刚刚', id: 15 }] }
        ],
        list2: [
          { name: 'Jonny 4', id: 3, list: [{ name: '我的111', id: 16 }, { name: '范德萨看222', id: 17 }] },
          { name: 'Guisepe 5', id: 4, list: [{ name: '我的111', id: 18 }, { name: '范德萨看222', id: 20 }] }
        ],

        operation: {
          oldFirstIndex: 0,
          oldSecondIndex: 0,
          oldFirstValue: {},
          oldSecondValue: {},
          newFirstIndex: 0,
          newSecondIndex: 0,
          newFirstValue: {},
          newSecondValue: {}
        }
      }
    },
    methods: {
      onClick (firstIndex, secondIndex, firstRow, secondRow) {
        this.operation.oldFirstIndex = firstIndex
        this.operation.oldSecondIndex = secondIndex
        this.operation.oldFirstValue = firstRow
        this.operation.oldSecondValue = secondRow
      },
      onEnd () {
        this.$nextTick(() => {
          // 记录拖拽前后位置信息
          this.list1.forEach((v, i) => {
            let index = v.list.findIndex(val => {
              return val.id === this.operation.oldSecondValue.id
            })

            if (index != -1) {
              this.operation.newFirstIndex = i
              this.operation.newSecondIndex = index
              this.operation.newFirstValue = v
              this.operation.newSecondValue = v['list'][index]
            }
          })
          console.log(this.operation)

          // 移动被顶替位置
          /*let replaceValue = this.$cu.deepClone(this.operation.newSecondValue)
          this.list1[this.operation.newFirstIndex]['list'].splice([this.operation.newSecondIndex] + 1, 1)
          this.list1[this.operation.oldFirstIndex]['list'].splice(this.operation.oldSecondIndex, 0, replaceValue)*/
        })
      }
    },
    computed: {
      dragOptions () {
        return {
          animation: 200,
          group: 'description',
          disabled: false,
          ghostClass: 'ghost'
        }
      }
    }
  }
</script>

<style>
  .list-group {
    min-height: 20px;
  }

  .list-group-item {
    cursor: move;
  }

  .list-group-item i {
    cursor: pointer;
  }
</style>
